<style scoped>
.item {
  background-color: #f2f6fc;
  height: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding: 10px 40px 30px;
  margin-bottom: 20px;
}
.item > h2 {
  font-size: 16px;
  text-align: center;
  padding: 20px 10px 10px;
}
.item > .msg {
  font-size: 12px;
  text-align: center;
}
.item > .msg > span {
  color: #5fc6e2;
}
.item > .content {
  font-size: 16px;
  font-weight: 700;
  padding: 10px 0;
}
</style>
<template>
  <div>
    <div class="item">
      <h2>{{ message.title }}</h2>
      <p class="msg" v-if="message.author">
        作者：<span>{{ message.author.username }}</span> - 时间：<span>{{
          $dayjs(message.time).format("YYYY-MM-DD HH:mm:ss")
        }}</span>
        - 阅读：<span>{{ message.read }}</span> - 评论：<span>{{
          message.discuss.length
        }}</span>
      </p>
      <p class="content">{{ message.content }}</p>
    </div>
    <content-comment
      :uid="uid"
      :list="list"
      @push="submitDiscuss"
    ></content-comment>
  </div>
</template>

<script>
import contentComment from "./contentComment.vue";
export default {
  components: {
    contentComment,
  },
  data() {
    return {
      id: "", //文章id
      message: {},
      list: [], //存放评论列表数据
      uid: "", //用户id
    };
  },
  created() {
    this.id = this.$route.query.id;
    try{
        this.uid = JSON.parse(this.$store.state.qiantai.token).uid;
    }catch{
        this.uid = ''
    }
    this.update();
    // 阅读加1
    this.$http.post("/article/set/read", { id: this.id });
  },
  watch:{
      "$store.state.qiantai.token"(val){
          console.log(val);
          if(!val){
              this.uid = ''
          }else{
              this.uid = JSON.parse(val).uid;
          }
      }
  },
  methods: {
    updateOne() {
      Promise.all([
        this.$http.get("/article/detail", { params: { id: this.id } }),
        this.$http.get("/article/discuss1", {params: { id: this.id, time: new Date() }}),
        ]).then((d1) => {
            console.log(d1);
            if (d1[0].data.code == 0) {
                this.message = d1[0].data.data;
            } else {
                document.write(d1[0].data.msg);
            }

            if (d1[1].data.code == 0) {
                    this.list = d1[1].data.data;
            }
        });
    },
    update() {
      Promise.all([
        this.$http.get("/article/detail", { params: { id: this.id } }),
        this.$http.get("/article/discuss1", {params: { id: this.id, time: new Date() }}),
        ]).then((d1) => {
            console.log(d1);
            if (d1[0].data.code == 0) {
                this.message = d1[0].data.data;
            } else {
                document.write(d1[0].data.msg);
            }

            if (d1[1].data.code == 0) {
                    this.list = d1[1].data.data;
            }
        });
    },
    submitDiscuss(val) {
      console.log(val);
      if (!val == "") {
        this.$http.post("/article/add/comment", {
          id: this.uid,
          msg: val,
          artid: this.id,
        });
        setTimeout(()=>{
             this.update();
        },900)
      } else {
        this.$message({
          message: "评论内容不能为空哦~",
          type: "warning",
        });
      }
    },
  },
};
</script>